<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-card>
      <el-row :gutter="20" style="margin-bottom: 20px">
        <el-form :inline="true" :model="listQuery" size="small">
          <el-row>
            <el-col :span="20">
              <el-form-item>
                <el-input
                  size="small"
                  placeholder="请输入工程名"
                  clearable
                  v-model="listQuery.name"
                />
              </el-form-item>
              <el-form-item>
                <el-select
                  size="small"
                  v-model="listQuery.category"
                  clearable
                  placeholder="工程类型"
                >
                  <el-option
                    v-for="item in categoryList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-date-picker
                  v-model="listQuery.open_time"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>

              <el-form-item>
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-search"
                  @click.native="getProjectList"
                  >查询</el-button
                >
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  size="mini"
                  @click="handleAdd"
                >
                  新增{{ title }}
                </el-button>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  @click="handleBatchDelete"
                >
                  批量删除
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item>
                <el-input
                  placeholder="请输入工程造价"
                  v-model="listQuery.costs"
                  class="pre-select"
                  clearable
                  @input="
                    listQuery.costs = listQuery.costs.replace(/[^\d]/g, '')
                  "
                >
                  <el-select
                    v-model="listQuery.operator"
                    slot="prepend"
                    placeholder="比较符"
                    clearable
                  >
                    <el-option label="大于" value="1"></el-option>
                    <el-option label="小于" value="0"></el-option>
                  </el-select>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-select
                  style="width: 260px"
                  size="small"
                  v-model="listQuery.is_win"
                  multiple
                  clearable
                  placeholder="是否中标"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-select
                  size="small"
                  v-model="listQuery.finish"
                  clearable
                  placeholder="是否完结"
                >
                  <el-option
                    v-for="item in finish"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-input
                  placeholder="二级建造师"
                  clearable
                  v-model="listQuery.architect"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  type="success"
                  icon="el-icon-document"
                  size="mini"
                  @click="getProject2Excel"
                >
                  导出Excel
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
      <!-- table列表 -->
      <el-table
        style="width: 100%"
        border
        stripe
        size="small"
        :data="projects"
        v-loading="listLoading"
        highlight-current-row
        show-summary
        :summary-method="getSummaries"
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="#" align="center" type="selection" />
        <el-table-column
          fixed
          prop="name"
          header-align="center"
          label="工程名称"
          width="280px"
        >
          <template slot-scope="scope">
            <el-link type="primary" @click="handleEdit(scope)" size="mini">{{
              scope.row.name
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="accept_date"
          align="center"
          label="受理日期"
          width="100px"
        >
        </el-table-column>
        <el-table-column
          prop="accept_person"
          align="center"
          label="受理人"
          width="90px"
        ></el-table-column>
        <el-table-column
          prop="introducer"
          align="center"
          label="介绍人"
          width="90px"
        >
        </el-table-column>
        <el-table-column
          prop="contact_person"
          align="center"
          label="联系人"
          width="100px"
        >
        </el-table-column>
        <el-table-column
          prop="contact_tel"
          align="center"
          label="联系电话"
          width="100px"
        >
        </el-table-column>
        <el-table-column prop="bid_type_name" align="center" label="标书类型">
        </el-table-column>
        <el-table-column prop="category_name" align="center" label="工程类型">
        </el-table-column>
        <el-table-column prop="is_win_name" align="center" label="是否中标">
        </el-table-column>
        <el-table-column
          width="100px"
          prop="enter_date"
          align="center"
          label="报名时间"
        >
        </el-table-column>
        <el-table-column
          width="140px"
          prop="open_time"
          align="center"
          label="开标时间"
        >
        </el-table-column>
        <el-table-column
          prop="architect"
          align="center"
          label="二级建造师"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="auth_person"
          align="center"
          label="授权委托人"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="remark"
          align="center"
          label="备注"
          width="140"
        ></el-table-column>
        <el-table-column
          prop="quali_recv_fee"
          align="center"
          label="资质费用(应收)(元)"
          width="120"
          :formatter="dataFormatter"
        ></el-table-column>
        <el-table-column
          prop="recv_remark"
          align="center"
          label="应收资费说明"
          width="240"
        ></el-table-column>
        <el-table-column
          prop="quali_pay_fee"
          align="center"
          label="资质费用(应付)(元)"
          width="120"
          :formatter="dataFormatter"
        ></el-table-column>
        <el-table-column
          prop="pay_remark"
          align="center"
          label="应付资费说明"
          width="240"
        ></el-table-column>
        <el-table-column
          prop="costs"
          align="center"
          label="工程造价(元)"
          width="120"
          :formatter="dataFormatter"
        ></el-table-column>
        <el-table-column
          prop="finish_name"
          align="center"
          label="完结"
        ></el-table-column>
        <el-table-column
          prop="user_name"
          align="center"
          label="经办人"
        ></el-table-column>
        <el-table-column prop="merit" align="center" label="绩效">
        </el-table-column>
        <el-table-column
          prop="merit_desc"
          align="center"
          label="绩效说明"
          width="150"
        ></el-table-column>
        <el-table-column align="center" label="操作" width="180px">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="handleEdit(scope)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.page_size"
        @pagination="getProjectList"
      />
    </el-card>
    <!-- 弹框 -->
    <el-dialog :title="getTitle" :visible.sync="dialogVisible" width="50%">
      <el-form
        size="small"
        :model="form"
        :rules="formRules"
        ref="formRef"
        label-width="120px"
        label-position="right"
        style="width: 95%"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="工程名称" prop="name">
              <el-autocomplete
                style="width: 100%"
                v-model="form.name"
                :fetch-suggestions="querySearchAsync"
                placeholder="请输入工程名称"
                popper-class="el-autocomplete-suggestion"
                :popper-append-to-body="false"
                clearable
                :trigger-on-focus="false"
              ></el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="受理日期" prop="accept_date">
              <el-date-picker
                value-format="yyyy-MM-dd"
                v-model="form.accept_date"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="受理人" prop="accept_person">
              <el-input
                v-model="form.accept_person"
                placeholder="受理人"
                maxlength="64"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="介绍人" prop="introducer">
              <el-input
                v-model="form.introducer"
                placeholder="介绍人"
                maxlength="64"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系人" prop="contact_person">
              <el-input
                v-model="form.contact_person"
                placeholder="联系人"
                maxlength="64"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="contact_tel">
              <el-input
                v-model="form.contact_tel"
                placeholder="联系电话"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="工程类型" prop="category">
              <el-select
                v-model="form.category"
                clearable
                placeholder="请选择工程类型"
              >
                <el-option
                  v-for="item in categoryList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否中标" prop="is_win">
              <el-select
                v-model="form.is_win"
                clearable
                placeholder="请选择是否中标"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="标书类型">
              <el-select
                v-model="form.bid_type"
                clearable
                placeholder="请选择标书类型"
              >
                <el-option
                  v-for="item in bidTypeList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="报名时间">
              <el-date-picker
                value-format="yyyy-MM-dd"
                v-model="form.enter_date"
                type="date"
                placeholder="报名时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="开标时间">
              <el-date-picker
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="form.open_time"
                type="datetime"
                placeholder="选择开标时间"
                align="right"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="二级建造师" prop="architect">
              <el-input
                v-model="form.architect"
                placeholder="二级建造师"
                maxlength="64"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="授权委托人" prop="auth_person">
              <el-input
                v-model="form.auth_person"
                placeholder="授权委托人"
                maxlength="24"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" placeholder="备注" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="资质费用(应收)" prop="quali_recv_fee">
              <el-input
                v-model="form.quali_recv_fee"
                placeholder="资质费用(应收)"
                clearable
                @input="
                  addForm.quali_recv_fee = form.quali_recv_fee.replace(
                    /[^\d]/g,
                    ''
                  )
                "
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="应收说明" prop="recv_remark">
              <el-input
                v-model="form.recv_remark"
                placeholder="应收说明"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="资质费用(应付)" prop="quali_pay_fee">
              <el-input
                v-model="form.quali_pay_fee"
                placeholder="资质费用(应付)"
                clearable
                @input="
                  form.quali_pay_fee = form.quali_pay_fee.replace(/[^\d]/g, '')
                "
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="应付说明" prop="pay_remark">
              <el-input
                v-model="form.pay_remark"
                placeholder="应付说明"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="工程造价" prop="costs">
              <el-input
                v-model="form.costs"
                placeholder="工程造价"
                clearable
                @input="form.costs = form.costs.replace(/[^\d.]/g, '')"
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="完结" prop="finish">
              <el-select
                v-model="form.finish"
                clearable
                placeholder="请选择是否完结"
              >
                <el-option
                  v-for="item in finish"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="绩效" prop="merit">
              <el-input
                v-model="form.merit"
                placeholder="绩效"
                clearable
                @input="form.merit = form.merit.replace(/[^\d]/g, '')"
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="绩效说明" prop="merit_desc">
              <el-input
                v-model="form.merit_desc"
                placeholder="绩效说明"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave(false)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 手机号验证
const validatePhone = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入手机号"));
  } else {
    if (!/^1[3456789]\d{9}$/.test(value)) {
      callback(new Error("请输入正确的手机号"));
    } else {
      callback();
    }
  }
};

import { mapGetters } from "vuex";
import Pagination from "@/components/Pagination";
import { toThousandFilter } from "@/filters";
import {
  bidType_list,
  getCategory_list,
  getUser,
  getProjects,
  addProject,
  updateProject,
  delProject,
  delProjects,
  getProjectSearchList,
} from "@/api/building";

const defaultForm = {
  id: null,
  name: "",
  accept_date: "",
  accept_person: "",
  introducer: "",
  contact_person: "",
  contact_tel: "",
  bid_type: "",
  category: null,
  is_win: null,
  enter_date: null,
  open_time: null,
  architect: "",
  auth_person: "",
  remark: "",
  quali_recv_fee: 0,
  recv_remark: "",
  quali_pay_fee: 0,
  pay_remark: "",
  costs: 0,
  finish: null,
  user: null,
  merit: 0,
  merit_desc: "",
};

export default {
  name: "Project",
  data() {
    return {
      form: Object.assign({}, defaultForm),
      title: "工程",
      dialogType: "new",

      bidTypeList: [],
      categoryList: [],
      userList: [],
      projects: [],
      selections: [],
      exportData: [],
      filename: "工程登记表",

      value: "",
      listLoading: true,
      edit: false,
      listQuery: {
        name: null,
        costs: null,
        category: null,
        is_win: [],
        open_time: null,
        operator: null,
        finish: null,
        architect: null,
        export: 0,
        page: 1,
        page_size: 15,
      },
      total: 0,
      dialogVisible: false,
      info: {
        name: "",
        introducer: "",
      },

      formRules: {
        id: [{ required: true, message: "请输入类型ID", trigger: "blur" }],
        name: [{ required: true, message: "请输入工程名称", trigger: "blur" }],
        accept_date: [
          { required: true, message: "请输入受理日期", trigger: "blur" },
        ],
        accept_person: [
          { required: true, message: "请输入受理人", trigger: "blur" },
        ],
        introducer: [
          { required: true, message: "请输入介绍人", trigger: "blur" },
        ],
        contact_person: [
          { required: true, message: "请输入联系人", trigger: "blur" },
        ],
        contact_tel: [
          {
            required: true,
            message: "请输入联系电话",
            trigger: ["blur", "change"],
          },
        ],
        category: [
          {
            required: true,
            message: "请输入工程类型",
            trigger: ["blur", "change"],
          },
        ],
        is_win: [
          {
            required: true,
            message: "请选择是否中标",
            trigger: ["blur", "change"],
          },
        ],
      },

      finish: [
        {
          value: 0,
          label: "未完",
        },
        {
          value: 1,
          label: "完结",
        },
      ],
      options: [
        {
          value: 0,
          label: "未投",
        },
        {
          value: 1,
          label: "中标",
        },
        {
          value: 2,
          label: "落标",
        },
        {
          value: 3,
          label: "直签",
        },
      ],

      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },
  components: {
    Pagination,
  },
  computed: {
    ...mapGetters(["uid"]),
    getTitle() {
      return this.dialogType == "new"
        ? `新增${this.title}`
        : `修改${this.title}`;
    },
  },
  created() {
    this.getProjectList();
    this.getBidType();
    this.getCategory();
  },
  methods: {
    number() {
      this.form.merit = this.form.merit.replace(/[^\d.]/g, "");
      this.form.quali_pay_fee = this.form.quali_pay_fee.replace(/[^\d.]/g, "");
      this.form.quali_recv_fee = this.form.quali_recv_fee.replace(
        /[^\d.]/g,
        ""
      );
      this.form.costs = this.form.costs.replace(/[^\d.]/g, "");
    },
    //获取标书类型数据列表
    getBidType() {
      bidType_list()
        .then((res) => {
          this.bidTypeList = res;
        })
        .catch((error) => {
          console.log(error.message);
        });
    },
    //获取工程类型数据列表
    getCategory() {
      getCategory_list()
        .then((res) => {
          this.categoryList = res;
        })
        .catch((error) => {
          console.log(error.message);
        });
    },
    //获取工程登记表数据列表
    getProjectList() {
      this.listLoading = true;
      this.listQuery.export = 0;
      getProjects(this.listQuery)
        .then((res) => {
          this.projects = res.results;
          this.total = res.count;
          this.listLoading = false;
        })
        .catch((err) => {
          this.listLoading = false;
        });
    },
    //添加数据，弹框显示
    handleAdd() {
      this.dialogVisible = true;
      this.dialogType = "new";
      this.form = Object.assign({}, defaultForm);
      this.$nextTick(() => {
        this.$refs.formRef.clearValidate();
      });
    },
    //确定添加数据
    async handleSave() {
      this.$refs.formRef.validate(async (valid) => {
        if (!valid) return;

        let res = null;
        if (this.dialogType == "new") {
          this.form.user = this.uid;
          try {
            res = await addProject(this.form);
          } catch (err) {
            // console.log(err);
            this.$message.error("增加失败!");
          }
        } else {
          if (!this.form.user) {
            this.form.user = this.uid;
          }
          try {
            res = await updateProject(this.form);
          } catch (err) {
            // console.log(err);
            this.$message.error("修改失败!");
          }
        }

        this.dialogVisible = false;
        this.getProjectList();

        const {
          name,
          accept_date,
          accept_person,
          category_name,
          is_win_name,
        } = res;

        this.$notify({
          title: "Success",
          dangerouslyUseHTMLString: true,
          message: `
              <div>工程名称: ${name}</div>
              <div>受理日期: ${accept_date}</div>
              <div>受理人: ${accept_person}</div>
              <div>工程类型: ${category_name}</div>
              <div>是否中标: ${is_win_name}</div>
            `,
          type: "success",
        });
      });
    },
    //弹窗显示，数据回显
    handleEdit(scope) {
      this.dialogType = "edit";
      this.form = scope.row;
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.formRef.clearValidate();
      });
    },

    //删除数据
    async handleDelete(id) {
      const removeResult = await this.$confirm("是否确定删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch((err) => err);
      if (removeResult !== "confirm") {
        return this.$message.info("已取消删除");
      }
      delProject(id)
        .then((res) => {
          this.$message.success("删除成功！");
          this.getProjectList();
        })
        .catch((err) => err);
    },
    handleBatchDelete() {
      if (this.selections.length == 0) {
        this.$message.warning("请选择要删除记录");
        return;
      }
      this.$confirm("确定要删除选中记录吗?", "删除提示：", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const sel_ids = {
            select_ids: this.selections,
          };
          const res = await delProjects(sel_ids);
          this.getProjectList();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch((err) => {
          console.error(err);
        });
    },
    handleSelectionChange(val) {
      this.selections = val.map((item) => item.id);
    },
    async querySearchAsync(queryString, cb) {
      if (queryString !== "") {
        const params = {
          name: queryString,
        };
        let res = await getProjectSearchList(params);
        cb(res);
      }
    },

    dataFormatter(row, column, cellValue, index) {
      if (column.property == "costs") {
        return cellValue && toThousandFilter(cellValue.toFixed(2));
      } else if (column.property == "quali_pay_fee") {
        return cellValue && cellValue.toFixed(2);
      } else if (column.property == "quali_recv_fee") {
        return cellValue && cellValue.toFixed(2);
      } else {
        return cellValue;
      }
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 2) {
          sums[index] = "合计";
          return;
        }
        if (
          column.property === "costs" ||
          column.property === "quali_pay_fee" ||
          column.property === "quali_recv_fee"
        ) {
          const values = data.map((item) => item[column.property]);
          sums[index] = values
            .reduce((prev, curr) => {
              return prev + curr;
            }, 0)
            .toFixed(2);
          sums[index] = toThousandFilter(sums[index]);
          sums[index] += " 元";
        } else {
          return;
        }
      });

      return sums;
    },
    getProject2Excel() {
      this.listQuery.export = 1;
      this.listQuery.ordering = "accept_date";
      getProjects(this.listQuery)
        .then((res) => {
          this.exportData = res;
          this.handleDownload();
        })
        .catch((err) => {
          console.log(err);
        });
    },

    handleDownload() {
      import("@/vendor/Export2Excel").then((excel) => {
        //表格的表头列表
        const tHeader = [
          "工程名称",
          "受理日期",
          "受理人",
          "介绍人",
          "联系人",
          "联系电话",
          "标书类型",
          "工程类型",
          "是否中标",
          "报名时间",
          "开标时间",
          "二级建造师",
          "授权委托人",
          "备注",
          "资质费用(应收)",
          "应收说明",
          "资质费用(应付)",
          "应付说明",
          "工程造价",
          "完结",
          "经办人",
          "绩效",
        ]; //与表头相对应的数据里边的字段
        const filterVal = [
          "name",
          "accept_date",
          "accept_person",
          "introducer",
          "contact_person",
          "contact_tel",
          "bid_type_name",
          "category_name",
          "is_win_name",
          "enter_date",
          "open_time",
          "architect",
          "auth_person_name",
          "remark",
          "quali_recv_fee",
          "recv_remark",
          "quali_pay_fee",
          "pay_remark",
          "costs",
          "finish_name",
          "user_name",
          "merit",
        ];
        let list = this.exportData;
        console.log(list);
        const data = this.formatJson(filterVal, list);
        let filename = this.filename + Math.ceil(Math.random() * 10000);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename,
        });
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j];
        })
      );
    },
  },
  watch: {
    "form.contact_tel": function (curVal, oldVal) {
      if (!curVal) {
        this.form.contact_tel = "";
        return false;
      }
      // 实时把非数字的输入过滤掉
      this.form.contact_tel = curVal.match(/\d/gi)
        ? curVal.match(/\d/gi).join("")
        : "";
    },
  },
};
</script>

<style scoped>
.el-pagination {
  margin-top: 20px;
}
/deep/ .el-autocomplete-suggestion {
  width: auto !important;
}
</style>